<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example: Handling DOM Events</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.4.0pr3/build/cssgrids/grids-min.css">
    <link rel="stylesheet" href="../assets/css/main.css">
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <script src="../../build/yui/yui-min.js"></script>
</head>
<body>

<div id="doc">
    <h1>Example: Handling DOM Events</h1>

    

    <div class="yui3-g">
        <div id="main" class="yui3-u">
            <div class="content"><div class="intro">
    <p>This example demonstrates how to respond to DOM events from a Node instance.</p>
    <p>Clicking the box will report some event details.</p>
</div>

<div class="example">
<link href="../assets/node/node.css" rel="stylesheet" type="text/css">
<div id="demo">
    <p><em>lorem</em> <code>ipsum</code> <strong>dolor</strong> <span>sit</span></p>
    <div id="event-result">Click anywhere in the box to see some event data.</div>
</div>

<script type="text/javascript">
YUI().use('node', function(Y) {
    var onClick = function(e) {
        var type = e.type,
            currentTarget = e.currentTarget, // #demo
            target = e.target; // #demo or a descendant
            
        Y.one('#event-result').setContent('<dl>' +
            '<dt>type</dt><dd>' + e.type + '</dd>' +
            '<dt>target</dt><dd>' + target.get('tagName') + '</dd>' +
            '<dt>currentTarget</dt><dd>' + currentTarget.get('tagName') +
                '#' + currentTarget.get('id') + '</dd></dl>');
    };

    Y.one('#demo').on('click', onClick);
});
</script>


</div>

<h2>Setting up the HTML</h2>
<p>First we need some HTML to work with.</p>
<pre class="code prettyprint">&lt;div id=&quot;demo&quot;&gt;
    &lt;p&gt;&lt;em&gt;lorem&lt;&#x2F;em&gt; &lt;code&gt;ipsum&lt;&#x2F;code&gt; &lt;strong&gt;dolor&lt;&#x2F;strong&gt; &lt;span&gt;sit&lt;&#x2F;span&gt;&lt;&#x2F;p&gt;
    &lt;div id=&quot;event-result&quot;&gt;&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;</pre>

<h2>Creating the Event Handler</h2>
<p>Next we will create a handler to run when the event is fired. In our handler we will update the node with some of the properties of the event.</p>
<pre class="code prettyprint">var onClick = function(e) {
    var type = e.type,
        currentTarget = e.currentTarget, &#x2F;&#x2F; #demo
        target = e.target; &#x2F;&#x2F; #demo or a descendant

    Y.one(&#x27;#event-result&#x27;).setContent(&#x27;&lt;dl&gt;&#x27; +
        &#x27;&lt;dt&gt;type&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + e.type + &#x27;&lt;&#x2F;dd&gt;&#x27; +
        &#x27;&lt;dt&gt;target&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + target.get(&#x27;tagName&#x27;) + &#x27;&lt;&#x2F;dd&gt;&#x27; +
        &#x27;&lt;dt&gt;currentTarget&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + currentTarget.get(&#x27;tagName&#x27;) +
            &#x27;#&#x27; + currentTarget.get(&#x27;id&#x27;) + &#x27;&lt;&#x2F;dd&gt;&lt;&#x2F;dl&gt;&#x27;);
};</pre>


<h2>Listening for Events</h2>
<p>We can assign our handler to all of the items by using the <code>all</code> method to get a NodeList instance and using the <code>on</code> method to subscribe to the event.</p>
<pre class="code prettyprint">Y.one(&#x27;#demo&#x27;).on(&#x27;click&#x27;, onClick);</pre>


<h2>Complete Example Source</h2>
<pre class="code prettyprint">&lt;link href=&quot;..&#x2F;assets&#x2F;node&#x2F;node.css&quot; rel=&quot;stylesheet&quot; type=&quot;text&#x2F;css&quot;&gt;
&lt;div id=&quot;demo&quot;&gt;
    &lt;p&gt;&lt;em&gt;lorem&lt;&#x2F;em&gt; &lt;code&gt;ipsum&lt;&#x2F;code&gt; &lt;strong&gt;dolor&lt;&#x2F;strong&gt; &lt;span&gt;sit&lt;&#x2F;span&gt;&lt;&#x2F;p&gt;
    &lt;div id=&quot;event-result&quot;&gt;Click anywhere in the box to see some event data.&lt;&#x2F;div&gt;
&lt;&#x2F;div&gt;

&lt;script type=&quot;text&#x2F;javascript&quot;&gt;
YUI().use(&#x27;node&#x27;, function(Y) {
    var onClick = function(e) {
        var type = e.type,
            currentTarget = e.currentTarget, &#x2F;&#x2F; #demo
            target = e.target; &#x2F;&#x2F; #demo or a descendant
            
        Y.one(&#x27;#event-result&#x27;).setContent(&#x27;&lt;dl&gt;&#x27; +
            &#x27;&lt;dt&gt;type&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + e.type + &#x27;&lt;&#x2F;dd&gt;&#x27; +
            &#x27;&lt;dt&gt;target&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + target.get(&#x27;tagName&#x27;) + &#x27;&lt;&#x2F;dd&gt;&#x27; +
            &#x27;&lt;dt&gt;currentTarget&lt;&#x2F;dt&gt;&lt;dd&gt;&#x27; + currentTarget.get(&#x27;tagName&#x27;) +
                &#x27;#&#x27; + currentTarget.get(&#x27;id&#x27;) + &#x27;&lt;&#x2F;dd&gt;&lt;&#x2F;dl&gt;&#x27;);
    };

    Y.one(&#x27;#demo&#x27;).on(&#x27;click&#x27;, onClick);
});
&lt;&#x2F;script&gt;</pre>

</div>
        </div>

        <div id="sidebar" class="yui3-u">
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                                    <li data-description="Using selectors and property accessors with Node.">
                                        <a href="properties.html">Set and Get Properties</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using DOM methods with Node.">
                                        <a href="dom-node.html">DOM Methods</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Listening for DOM events with Node instances.">
                                        <a href="events.html">Handling DOM Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="NodeList provides Node functionality for multiple nodes.">
                                        <a href="nodelist.html">NodeList</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Using a single event listener to handle events on multiple nodes.">
                                        <a href="node-evt-delegation.html">Delegating Node Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to position an element in page coordinates.">
                                        <a href="node-xy.html">Node Positioning</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to set styles and get style information.">
                                        <a href="node-style.html">Node Styling</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to insert content into a Node.">
                                        <a href="node-insert.html">Adding Node Content</a>
                                    </li>
                                
                            
                                
                                    <li data-description="This example demonstrates how to show and hide a Node.">
                                        <a href="node-view.html">Showing and Hiding</a>
                                    </li>
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                        </ul>
                    </div>
                </div>
            

            
                <div class="sidebox">
                    <div class="hd">
                        <h2 class="no-toc">Examples That Use This Component</h2>
                    </div>

                    <div class="bd">
                        <ul class="examples">
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                            
                                
                                    <li data-description="Use the Event Utility to attach simple DOM event handlers.">
                                        <a href="../event/basic-example.html">Simple DOM Events</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating an accessible toolbar using the Focus Manager Node Plugin and Node&#x27;s support for the WAI-ARIA Roles and States.">
                                        <a href="../node-focusmanager/node-focusmanager-1.html">Accessible Toolbar</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Creating an accessible menu button using the Focus Manager Node Plugin, Event&#x27;s delegation support and mouseenter event, along with the Overlay widget and Node&#x27;s support for the WAI-ARIA Roles and States.">
                                        <a href="../node-focusmanager/node-focusmanager-3.html">Accessible Menu Button</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use IO to request XML data from a remote web service.">
                                        <a href="../io/weather.html">Request XML data from Yahoo! Weather</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Use IO to make a cross-domain request to Yahoo! Pipes, returning data from disparate sources.">
                                        <a href="../io/xdr.html">Request JSON using Yahoo! Pipes</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Example Photo Browser application.">
                                        <a href="../dd/photo-browser.html">Photo Browser</a>
                                    </li>
                                
                            
                                
                                    <li data-description="Portal style example using Drag &amp; Drop Event Bubbling and Animation.">
                                        <a href="../dd/portal-drag.html">Portal Style Example</a>
                                    </li>
                                
                            
                        </ul>
                    </div>
                </div>
            
        </div>
    </div>
</div>

<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>

</body>
</html>
